<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title> 
    <script src="../jquery.js"></script>
    <script src="../browser.js"></script>
    <script src="../angular.js"></script>
    <script src="../es6-module-loader.js"></script>
    <style>
    html {
        height: 100%;
    }
    body{
        margin: 0;
        background-color: #ccc;
        height: 100%;
    } 
        
        * {
            border: 1px solid red;
        }
    
/*
        .patient-position {
            position: relative;
            background-image:  url(ct.svg);
            background-repeat: no-repeat; 
            background-size: 100% 100%;
            background-position: 0 30px;
            z-index: 1;
        }
        .patient-position.small {
            background-position: 0 15px;
        }
        .patient-position .patient1 {
            position: absolute;
             height: 100%;
            width: 100%;
             border: 1px solid blue;  
            background-image: url(patient.svg); 
            background-repeat: no-repeat; 
            //background-position: 35px 234px;
            z-index: 3;
             background-color: rgba(0, 0, 0, .3);
        }
        .patient-position .patient {
            position: absolute;
             height: 100%;
            width: 100%;
             border: 1px solid blue;  
            background-image: url(patient.svg); 
            background-repeat: no-repeat; 
            background-size:61.5% 35.4%;
            background-position: 35px 210px;
            z-index: 2;
        }
        
        .patient-position.small .patient{
            position: absolute;
             height: 100%;
            width: 100%;
             border: 1px solid blue;  
            background-image: url(patient.svg); 
            background-repeat: no-repeat; 
           // background-size: 100% 100%;
            background-size:61.5% 35.4%; 
            background-position: 17.5px 105px; //35px 210px;
            z-index: 2;
        }      
        
*/
        .head, .foot, .clockwise, .anticlockwise {
        position: absolute;
        z-index: 3;
        cursor: pointer;
        background-color: rgba(255, 255, 255, 1);
    }
    .clockwise:hover, .head:hover, .foot:hover, .anticlockwise:hover {
        background-color: rgba(0, 0, 0, .3);
    }
    .head {
        top: 31.7%;
        right: 7.9%;
        width: 25.45%;
        height: 18%;
        transform: rotate(34.8deg) skew(-31.5deg, 0);
    }
    .foot {
        bottom: 13.7%;
        left: -11.6%;
        width: 25.2%;
        height: 18%;
        transform: rotate(33.8deg) skew(-30.2deg, 0);
    }
    .clockwise {
        top: 62.5%;
        left: 28.35%;
        height: 20%;
        width: 64%;
        transform: rotate(-24.68deg) skew(31.5deg, 0);
    }
    .anticlockwise {
        height: 20%;
        width: 64.25%;
        top: 34.8%;
        left: -12.8%;
        transform: rotate(-25.1deg) skew(31.5deg, 0);
    }
  
    </style>
</head>
<body ng-controller="MC"> 
       <app-patient-position size="100%" posture-adjustable></app-patient-position>
       
       <app-patient-position size="1024"></app-patient-position>
    <script>
          
    	System.transpiler = "babel";
    	System.babelOptions = {
	    	stage: 0
	    };
        
        System.import("./app")
            .then(function() {
            
            var app = angular.module("app", []);
            app.controller("MC", function($scope) { 
            });


            app.directive("appPatientPosition", function() {                
                return {
                    restrict: "EA",
                    replace: true,
                    transclude: true,
                    scope: {
                        size: "@"
                    },
                    link($scope, $element, $attrs) {
                        "use strict";
                        
                        const DEFAULT_SIZE = "512";                        
                        $scope.size = $scope.size || DEFAULT_SIZE;    
                    },
                    template:
                        '<div ' +
                        '   class="patient-position" style="' +
                        '       width:{{size}}px; height:{{size}}px;' +
                        '       position: relative; z-index: 1; overflow: hidden;' +
                        '       background: url(ct.svg) 0 0/100% 100% no-repeat;">' +
                        '' +
                        '   <div class="patient" style="' +
                        '       position: absolute; z-index: 2; width: 100%; height: 100%;' +
                        '       background: url(patient.svg) 0 0/100% 100% no-repeat;">' +                    
                        '   </div>' +
                        '' +
                        '</div>'
                }
            });
            
            app.directive("postureAdjustable", function() {
                return { 
                    link($scope, $element, $attrs) {
                        $element.append(
                            '<div class="head" ng-click="adjustTo(\'UPDOWN\')"></div>' +
                            '<div class="foot" ng-click="adjustTo(\'UPDOWN\')"></div>' +
                            '<div class="clockwise" ng-click="adjustTo(\'CLOCKWISE\')"></div>' +
                            '<div class="anticlockwise" ng-click="adjustTo(\'ANTICLOCKWISE\')"></div>'
                        );
                    }
                }
                
            });
            
            app.directive("positionSelection", function() {
                 return {
                        restrict: "EA",
                        controller: function($scope) {
                            $scope.regions = [
                                {
                                    name: "lung",
                                    category: "Lung"
                                },
                                {
                                    name: "brain",
                                    category: "Head"
                                },
                                {
                                    name: "stomach",
                                    category: "z"
                                },
                                {
                                    name: "abdomen",
                                    category: "y"
                                },
                                {
                                    name: "vertebra",
                                    category: "z"
                                },
                                {
                                    name: "skeleton",
                                    category: "Skeleton"
                                },
                                {
                                    name: "arm",
                                    category: "y"
                                }
                            ];

                            $scope.switch = function(category) {
                                postal$.NEWPATIENT.publish("switch.region", {"value": category});
                            }
                        },
                        compile: function($element, $attrs, transclude) {
                            $element.append(
                                '<span' +
                            '    hc-clickable' +
                            '    class="region-btn {{region.name}}"' +
                            '    ng-repeat="region in regions"' +
                            '    ng-click="switch(region.category)">' +
                            '</span>'
                                );
                            
                            return {
                                pre: function(scope, iElement, iAttrs, controller) { 
                                    console.log("pre");
                                },
                                post: function(scope, iElement, iAttrs, controller) {   
                                
                                    console.log("post");
                                }
                            }
                        }
                            
                    }
                
            });
            
            angular.bootstrap(document, ["app"]);


            });
 
    </script>
</body>
</html>